<template>
    <div class="message-attr-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form label-width="110px" disabled>
                <template v-if="formData.modelBind">
                    <el-form-item label="模型名称：">
                        <el-link type="primary" @click="onGopage(formData)">
                            {{ formData.modelName }}
                        </el-link>
                    </el-form-item>
                    <el-form-item label="属性名称：" @click="onViewItem(formData)">
                        <el-link type="primary">
                            {{ formData.attributeName }}
                        </el-link>
                    </el-form-item>
                </template>
                <el-form-item v-else label="属性名称：" style="width: 100%">
                    <el-input v-model="formData.attributeName" />
                </el-form-item>
                <el-form-item label="表达式：" style="width: 100%">
                    <el-input v-model="formData.jsonExpression" type="textarea" />
                </el-form-item>
                <el-form-item label="槽号：" style="width: 100%">
                    <el-input v-model="formData.slot" />
                </el-form-item>
                <el-form-item label="属性性质：">
                    <el-input :value="AttributeCategory[formData.attributeCategory]" />
                </el-form-item>
                <el-form-item label="数据类型：">
                    <el-input :value="DataType[formData.attributeDataType]" />
                </el-form-item>
                <el-form-item label="传递来源：" style="width: 100%" v-if="formData.attributeCategory === 'VAR'">
                    <el-input :value="TransSource[formData.transSource]" />
                </el-form-item>
                <template v-else-if="formData.attributeCategory === 'CONST'">
                    <el-form-item label="常量值：">
                        <el-input v-model="formData.attributeConstValue" />
                    </el-form-item>
                    <el-form-item label="常量解码方式：">
                        <el-input v-model="formData.attributeStringEncode" />
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="bit起始位：">
                        <el-input v-model="formData.bitStart" />
                    </el-form-item>
                    <el-form-item label="属性长度：">
                        <el-input v-model="formData.attributeLength" />
                    </el-form-item>
                </template>
                <el-form-item label="解析方法（整型）" style="width: 100%" label-position="top" v-if="showParse()">
                    <el-table :data="formData.parseMethod || []" style="width: 100%" border>
                        <el-table-column type="index" label="序号" width="60" align="center" fixed />
                        <el-table-column label="名称" prop="name" />
                        <el-table-column label="值" prop="value" />
                    </el-table>
                </el-form-item>
                <el-form-item
                    label="解析方法（字符串）"
                    style="width: 100%"
                    label-position="top"
                    v-if="formData.attributeDataType === 'string'"
                >
                    <el-table :data="formData.parseMethod || []" style="width: 100%" border>
                        <el-table-column type="index" label="序号" width="60" align="center" fixed />
                        <el-table-column label="名称" prop="name" />
                        <el-table-column label="值" prop="value" />
                    </el-table>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { modelService } from '@great/services';
import { DataType, TransSource, AttributeCategory, ParseMethod, AttributeStringEncode } from '@/utils/constant';
import { showPopupBox, type PopupBoxProps } from '@great/utils';
import { checkPermi } from '@/utils/ruoyi';
import { useRouter } from 'vue-router';
import AttributeFormModal from '@/pages/model/thing/components/detail/thingModel/components/AttributeFormModal.vue';

const router = useRouter();
interface IProps extends PopupBoxProps {
    row?: Record<string, any>;
    callBack?: any;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '查看报文模板属性',
    width: 900,
    detail: undefined
});

const formData = ref<any>();
// 查看模型
const onGopage = (row: any) => {
    if (checkPermi(['model:thing:detail'])) {
        closeDialog();
        router.push({
            name: 'model-thing-detail',
            params: {
                id: row?.modelId
            }
        });
    }
};
// 查看属性
const onViewItem = async (row: any) => {
    let requests: Array<any> = [];
    let detailRequest = await modelService.attribute.getDetail(row.modelAttrId);
    requests.push(detailRequest);
    let attributeRequest = modelService.attribute.getTypeList();
    requests.push(attributeRequest);
    await Promise.all(requests);
    let detail = await detailRequest;
    let attribute = await attributeRequest;
    // 打开弹框
    showPopupBox(AttributeFormModal, {
        readOnly: true,
        detail: detail.data,
        attributeTypeList: attribute.data
    });
};
const showParse = (val?: string): boolean => {
    const includeArr = ['short', 'int', 'long', 'ushort', 'uint', 'ulong'];
    return includeArr.includes(val || formData.value?.attributeDataType);
};
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};
// 打开弹框
const openDialog = () => {
    let displayData = JSON.parse(JSON.stringify(props.row));
    if (showParse(displayData.attributeDataType)) {
        let parseMethod: any = [];
        if (displayData.parseMethod) {
            for (let key in displayData.parseMethod) {
                if (displayData.parseMethod.needCalculate) {
                    parseMethod.push({
                        name: ParseMethod[key],
                        label: key,
                        value: ParseMethod[key].includes('数据类型')
                            ? DataType[displayData.parseMethod[key]]
                            : key === 'needCalculate'
                              ? displayData.parseMethod[key]
                                  ? '是'
                                  : '否'
                              : displayData.parseMethod[key]
                    });
                } else {
                    if (key === 'byteOrder' || key === 'needCalculate') {
                        parseMethod.push({
                            name: ParseMethod[key],
                            label: key,
                            value: ParseMethod[key].includes('数据类型')
                                ? DataType[displayData.parseMethod[key]]
                                : key === 'needCalculate'
                                  ? displayData.parseMethod[key]
                                      ? '是'
                                      : '否'
                                  : displayData.parseMethod[key]
                        });
                    }
                }
            }
        }
        displayData.parseMethod = parseMethod;
    } else if (displayData.attributeDataType === 'string') {
        let parseMethod: any = [];
        if (displayData.parseMethod) {
            for (let key in displayData.parseMethod) {
                if (key === 'byteOrder' || key === 'attributeStringEncode') {
                    parseMethod.push({
                        name: ParseMethod[key],
                        label: key,
                        value:
                            key === 'attributeStringEncode'
                                ? AttributeStringEncode[displayData.parseMethod[key]]
                                : displayData.parseMethod[key]
                    });
                }
            }
        }
        displayData.parseMethod = parseMethod;
    }
    formData.value = displayData;
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss">
.message-attr-modal-wrapper {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            width: calc((100% - 10px) / 2);
        }
    }
}
</style>
